<template>
  <div class="login_container">
    <div class="illustration">
      <img :src="illustrationUrl" alt="校园招聘宣传图" srcset />
    </div>
    <div class="login-box">
      <div class="logo">
        <n-icon :size="40">
          <svg-icon name="Logo"></svg-icon>
        </n-icon>
        <n-gradient-text :size="24" type="success">
          AIIT JOB
        </n-gradient-text>
      </div>
      <code-login></code-login>
      <n-divider title-placement="center"> 其他登录方式 </n-divider>
      <div class="other-login">
        <n-button text @click="toggleLogin">
          <i class="iconfont icon-qrcode other-login-icon"></i>
          <n-icon :size="40">
            <svg-icon name="qrcode" color="#ccc"></svg-icon>
          </n-icon>
        </n-button>
        <n-button text @click="toggleLogin">
          <n-icon :size="40">
            <svg-icon name="face" color="#ccc"></svg-icon>
          </n-icon>
        </n-button>
      </div>

    </div>
  </div>
</template>

<script setup>
import CodeLogin from "./components/CodeLogin.vue";
import { ref } from "vue";
const illustrationUrl = ref(require("@/assets/imgs/login/publicity.png"));
function toggleLogin() {
  window.$message.info("该功能暂未开放");
}
</script>
<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100%;
  display: flex;

  .illustration {
    width: 50%;
    display: flex;
    align-items: center;

    img {
      width: 100%;
    }
  }

  .login-box {
    width: 50%;
    padding: 30px;
    .logo{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .other-login{
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>